<template>
  <div id="the_menu_for_details">
    <!-- 头图 -->
    <img class="topimg" :src="caipu.topimg">
    <!-- 标题 -->
    <div class="title_box">
      <p class="title">
        {{caipu.title}}
      </p>
      <p class="titleBom">
        <span>{{pingfen}}综合评分</span>
        <!-- <span>•2人最近7天做过</span> -->
      </p>
    </div>

    <!-- 主体 -->
    <div class="contentT">
      <!-- 作者信息 -->
      <div class="author">
        <img class="author_img" :src="caipu.user_img" alt="">
        <div class="author_detail">
          <div class="author_name">{{caipu.alias}}</div>
          <div class="author_id">{{caipu.user_name}}</div>
        </div>
      </div>
      <!-- 做法 -->
      <div class="cook_way">
        {{gs}}
      </div>
      <!-- 材料 -->
      <div class="cailiao">
        <span>用料</span>
        <span>装进菜篮子</span>
      </div>
      <!-- 用料 -->
      <div class="yongliao">
        <div class="item_yL" v-for="item in caipu.yongliao">
          <span>{{item.name}}</span>
          <span>{{item.zl}}</span>
        </div>
      </div>

      <div class="buzhou">
        <div class="item_bu" v-for="(value,index) in caipu.buzhou">
          <div class="buNum">步骤{{index+1}}</div>
          <div class="buText">{{value.info_txt}}</div>
        </div>


        <div class="xts">
          <div class="buNum">小贴士</div>
          <div class="buText">{{xts}}</div>
        </div>

        <div class="ziBom">
          点赞就成，打赏随缘
        </div>

        <div class="btn_zan">
          赞赏支持
        </div>

        <div class="endcontent">
          <span>{{liulanrenshu}}浏览</span>
          <span>{{shoucang}}收藏</span>
          <span>菜谱创建于{{ctime}}</span>
        </div>
      </div>
<!-- 菜谱评价 -->
      <div class="userPing">
        <div class="topPing">
          <span>菜谱评价({{pingjiarenshu}})</span>
          <div class="topPing_end">
            <span>好评度</span>
            <span>100%</span>
            <img src="../assets/img/upsan.png" alt="">
          </div>
        </div>
        <div class="item_P" v-for="item in pingjia" >
          <div class="item_P_top">
            <img :src="item.user_img" alt="">
            <span class="userName">
              {{item.user_name}}
            </span>
            <img :src="caipu.topimg" alt="">
          </div>
          <div class="yanyu">
            {{item.content}}
          </div>
        </div>
      </div>
<!-- 关联作品 -->
      <div class="z_Pin">
        <div class="z_PinT">
          <span>关联作品</span>
          <span>32个作品</span>
        </div>
      </div>
      <div class="z_Pin2">
        <div class="downLine"></div>
      </div>
<!--  -->

      <div class="z_PinUserBox" v-for="item in sms" >
        <div class="z_PinUser" >
          <img :src="item.user[0].user_img"  alt="">
          <div class="center">
            <div class="titlez">
              <span>{{item.user[0].alias}}</span>
              <img src="../assets/img/yStar.png"  alt="">
            </div>
            <div class="time_adres">
              <span>{{item.riqi}}</span>
              <span>{{item.address}}</span>
            </div>
          </div>
          <div class="wei">
            <span class="time_wei">{{item.last_time}}</span>
            <div class="timeR_wei">
              <img src="../assets/img/eye.png"  alt="">
              <span v-if="item.cishu < 1000">{{item.cishu}}+</span>
              <span v-else>999+</span>
            </div>
          </div>
        </div>
        <div class="pinglun">
          {{item.ss_jl}}
        </div>
        <div class="zuopin" v-for="item1 in item.img_url">
            <img src="../assets/img/zuopin.png" alt="" class="zuopinImg">
            <img class="zuo_Img" :src="item1" alt="">
        </div>
      
      </div>



    </div>

    <!-- 作者其他菜谱 -->

    <div class="z_tcaipu" v-for="item in xgcaipu">
      <div class="z_tcaipuT">
        <span>作者其它菜谱</span>
        <span>查看更多</span>
      </div>
    </div>
    <div class="z_tcaipu2">
      <div class="downLine"></div>
    </div>


    <div class="item_z_tcaipu">
      <div class="img_item_z_tcaipu" v-for="item in xgcaipu">

        <img class="z_tcaipuImg" :src="item.fengmian" alt="">
        <img class="caipuImg" src="../assets/img/caipu.png" alt="">

        <div class="user_z_tcaipu" v-for="item1 in item.user" >
          <div class="line01_user_z_tcaipu">
            <span>{{item.title}}</span>
            <img :src="item1.user_img" alt="">
          </div>
          <div class="line02_user_z_tcaipu">
            <div>
              <img src="../assets/img/cook.png" alt="">
              <span>{{item.tongji}}</span>
              <span class="rLine">|</span>
              <img src="../assets/img/star.png" alt="">
              <span>{{item.dianzan}}</span>
            </div>
            <div>
              <img src="../assets/img/yStar.png" alt="">
              <span>{{item1.alias}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    


  </div>
</template>

<script>


export default { 
  name: 'the_menu_for_details',
  data () {
    return {
      'pingfen':0,
      'caipu':{},
      'pingjia':[],
      'sms':[],
      'xgcaipu':[],
      'liulanrenshu':0,
      'shoucang':0,
      'ctime':0,
      'gs':'',
      'pingjiarenshu':0,
      'sms':[],
      'xgcaipu':[],
      'xts':''
    }
  },
  created(){
      function getUrlParam(name) {
        var canname = name
        var json = {}
        var href = location.hash
        var hrefUrl = href.split('?')
        console.log(hrefUrl[1])
        if(hrefUrl[1].indexOf('&') > 0){
          //有 & 
          var hrefArr = hrefUrl[1].split('&')
          console.log(hrefArr)
          for (var i = 0; i < hrefArr.length; i++) {
            var hrefAllArr = hrefArr[i].split('=')
            json[hrefAllArr[0]] = hrefAllArr[1]
            return json[canname]
          }
        }else{
          //没有& 
          var hrefUrlarr = hrefUrl[1].split('=')
          json[hrefUrlarr[0]] = hrefUrlarr[1]
          console.log(canname)
          console.log(json)
          return json[canname]
        }
      }
    let cp_id = getUrlParam('cp_id') || 16
    this.axios.post('http://api-wei.zhenlvw.com/v2/meishi.api.cpxiangqing',{'cp_id':cp_id})
    .then((res)=>{
          // console.log(res.data.data)
          this.pingfen=res.data.data.pingfen;//综合评分
          this.caipu=res.data.data.caipu;//菜谱
          this.pingjia=res.data.data.pingjia;//评价
          this.sms=res.data.data.sms;//
          this.xgcaipu=res.data.data.xgcaipu;
          this.shoucang=res.data.data.shoucang;
          this.ctime=res.data.data.ctime;//创建时间
          this.liulanrenshu=res.data.data.liulanrenshu;//浏览人数
          this.gs=res.data.data.caipu.gs;// 故事
          this.pingjiarenshu=res.data.data.pingjiarenshu;// 故事
          this.sms=res.data.data.sms;// sms
          this.xgcaipu=res.data.data.xgcaipu;// sms
          this.xts=res.data.data.caipu.xts;
        })
    .catch((err)=>{
      console.log(err);
    })
    $("title").html("the_menu_for_details"); 
  },
  methods:{
    quLine(){
      console.log(this.caipu.buzhou.lenght)
    }
  }
}
</script>

<style scoped>
/*头图*/
.topimg{
  width: 100%;
  height: 6.09rem;
}
/*标题*/
.title_box{
  padding-top:0.47rem;
  width: 100%;
}
.title{
  width: 100%;
  font-size:0.56rem;
  font-family:PingFang-SC-Bold;
  color:#434341;
  text-align: center;
  font-weight: bold;
  margin-bottom: 0.34rem;
}
.titleBom{
  width: 7rem;
  margin:0 auto;
  text-align: center;
  height:0.72rem;
  font-size:0.28rem;
  font-family:PingFang-SC-Regular;
  color:#434341;
  border-bottom: 1px solid #D2D2D2;
}
/*作者信息*/
.contentT{
  width: 100%;
  padding-top: 0.45rem;
}
.author{
  width: 7rem;
  margin:0 auto;
  display: flex;
}
.author_img{
  width: 1.2rem;
  height: 1.2rem;
  margin-left: 0.2rem;
  margin-right: 0.2rem;
  border-radius: 50%;
}
.author_detail{
  flex:1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding:0.2rem 0rem;
  font-size:0.26rem;
  font-family:PingFang-SC-Regular;
  color:#434341;
}
.cook_way{
  width: 6.78rem;
  padding:0.45rem 0.31rem 0.89rem 0.41rem;
}
/*材料*/
.cailiao{
  width: 6.78rem;
  margin-left:0.41rem;
  display: flex;
  justify-content: space-between;
}
.cailiao span:nth-child(1){
  font-size:0.34rem;
  font-family:PingFang-SC-Bold;
  color:rgba(67,67,65,1);
}
.cailiao span:nth-child(2){
  font-size:0.34rem;
  font-family:PingFang-SC-Bold;
  color:#FB765E;
  margin-bottom: 0.42rem;
}

.yongliao{
  width: 7rem;
  margin-left: 0.31rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #D2D2D2;
}
.item_yL{
  height: 0.89rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top:1px solid #D2D2D2;
}

.item_yL span{
  text-align: left;
  font-size:0.34rem;
  font-family:PingFang-SC-Regular;
  color:rgba(67,67,65,1);
  display: block;
}
.item_yL span:nth-child(1){
  width: 4rem;
}
.item_yL span:nth-child(2){
  flex:1;
}
/*步骤*/
.buzhou{
  width: 7rem;
  margin-left: 0.31rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #D2D2D2;
}
.item_bu{
  border-bottom: 1px solid #D2D2D2;
  padding-bottom: 0.6rem;
}
.item_bu:nth-last-child{
  border-bottom: 0px solid #fff;
}
.xts{
   border-bottom: 0px solid #fff;
}
.buNum{
  font-size:0.34rem;
  font-family:PingFang-SC-Bold;
  color:rgba(67,67,65,1);
  padding-top: 0.26rem;
  padding-bottom: 0.3rem;
}
.buText{
  font-size:0.34rem;
  font-family:PingFang-SC-Regular;
  color:rgba(67,67,65,1);
  line-height:0.52rem;
}

.ziBom{
  font-size:0.3rem;
  font-family:PingFangSC;
  color:rgba(44,123,140,1);
  text-align: center;
  padding-top:0.3rem;
  padding-bottom: 0.4rem;
}
.btn_zan{
  width:2.66rem;
  height:0.9rem;
  background:rgba(251,119,94,1);
  border-radius:40rem;
  font-size:0.4rem;
  font-family:PingFangSC;
  color:rgba(249,254,255,1);
  margin:0 auto;
  text-align: center;
  line-height: 0.9rem;
  letter-spacing:0.05rem;
}

.endcontent{
  font-size:0.24rem;
  font-family:PingFangSC;
  color:rgba(144,144,146,1);
  margin-top:0.6rem;
}
/*菜谱评价（123）*/
.userPing{
  width: 7rem;
  margin-left: 0.31rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #D2D2D2;
}

.topPing{
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
}
.topPing>span:nth-child(1){
  font-size:0.32rem;
  font-family:PingFangSC;
  color:rgba(250,130,108,1);
}
.topPing_end{
  width:2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topPing_end span:nth-child(1){
  font-size:0.28rem;
  font-family:PingFangSC;
  color:#595959;
}
.topPing_end span:nth-child(2){
  font-size:0.28rem;
  font-family:PingFangSC;
  color:#FB775E;
}
.topPing_end img{
  width: 0.26rem;
  height: 0.15rem;
  transform:rotate(90deg);
}

.item_P{

}

.item_P_top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.3rem 0rem;
}

.item_P_top img:nth-child(1){
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  margin-right: 0.10rem;
}

.item_P_top img:nth-child(3){
  width: 1rem;
  height: 0.3rem;
}

.userName{
  flex:1;
  font-size:0.24rem;
  font-family:PingFangSC;
  color:rgba(16,16,16,1);
}

.yanyu{
  font-size:0.24rem;
  font-family:PingFangSC;
  color:rgba(17,17,17,1);
  margin-bottom: 0.30rem;
}
/*关联作品*/
.z_Pin{
  width: 100%;
}
.z_PinT{
  width: 7rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 0.31rem;
  margin-top:0.31rem;
  margin-bottom: 0.2rem;
}
.z_PinT span:nth-child(1){
  font-size:0.4rem;
  font-family:PingFangSC;
  color:rgba(67,67,65,1);
}
.z_PinT span:nth-child(2){
  font-size:0.34rem;
  font-family:PingFang-SC-Regular;
  color:rgba(251,118,94,1);
}
.z_Pin2{
  width: 7rem;
  margin-left: 0.31rem;
}
.downLine{
  width:1.6rem;
  height:0.08rem;
  background: url('../assets/img/fourZ.png');
  background-size:1.6rem 0.08rem;
}
.z_PinUser{
  width: 6.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 0.31rem;
  margin-top:0.4rem;
  margin-bottom: 0.3rem;
}

.z_PinUser>img{
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  margin-right: 0.20rem;
}




.z_PinUser .center{
  flex:1;
  height: 0.8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.2rem 0rem;
}

.z_PinUser .center .titlez{
  display: flex;
  font-size:0.32rem;
  font-family:PingFangSC;
  color:rgba(0,0,0,1);
  align-items: flex-end;

}

.z_PinUser .center .titlez img{
  width: 0.26rem;
  height: 0.35rem;
  margin-left: 0.05rem;
}

.z_PinUser .center .time_adres{
  flex:1;
  display: flex;
  align-items: center;
}

.z_PinUser .center .time_adres span:nth-child(1){
  font-size:0.24rem;
  font-family:PingFangSC;
  color:rgba(179,175,175,1);
}
.z_PinUser .center .time_adres span:nth-child(2){
  font-size:0.24rem;
  font-family:PingFangSC;
  color:rgba(44,123,140,1);
  margin-left: 0.05rem;
}
.z_PinUser .wei{
  width: 2rem;
  display: flex;
  flex-direction: column;
  color:rgba(144,144,146,1);
  justify-content: space-between;
}
.z_PinUser .wei .time_wei{
  color:rgba(144,144,146,1);
  display: flex;
  align-items: center;
  justify-content:  flex-end;
}
.z_PinUser .wei .timeR_wei{
  display: flex;
  color:rgba(144,144,146,1);
  align-items: center;
  justify-content: flex-end;
}
.z_PinUser .wei .timeR_wei img{
  width: 0.4rem;
  height: 0.24rem;
  margin-right: 0.1rem;
}
.z_PinUser .wei.timeR_wei span{
  font-size:0.24rem;
  font-family:PingFangSC;
  color:rgba(179,175,175,1);
}
.pinglun{
  width: 7rem;
  margin-left: 0.31rem;
  font-size:0.28rem;
  font-family:PingFangSC;
  line-height: 0.42rem;
}
.zuopin{
  position: relative;
}
.zuopin .zuopinImg{
  width: 0.94rem;
  height: 0.44rem;
  position: absolute;
  left:0.33rem;
  top:0.33rem;
}
.zuo_Img{
  width: 100%;
  height: 6rem;
  margin-top:0.2rem;
}
/*作者其他菜谱*/
  .z_tcaipu{
    width: 7rem;
    margin-left: 0.31rem;
    margin-top:0.31rem;
    margin-bottom: 0.2rem;
  }
  .z_tcaipuT{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .z_tcaipuT span:nth-child(1){
    font-size:0.4rem;
    font-family:PingFangSC;
    color:rgba(67,67,65,1);
  }
  .z_tcaipuT span:nth-child(2){
    font-size:0.34rem;
    font-family:PingFangSC;
    color:#FB765E;
  }
  .z_tcaipu2{
    width: 7rem;
    margin-left: 0.31rem;
    margin-top:0.31rem;
    margin-bottom: 0.2rem;
  }

  .z_tcaipu2 .downLine{
    width:2.42rem;
    height:0.08rem;
    background: url('../assets/img/fourZ.png');
    background-size:2.42rem 0.08rem;
  }



    .item_z_tcaipu{
      width: 100%;
    }
    .img_item_z_tcaipu{
      width: 100%;
      position: relative;
    }
    .img_item_z_tcaipu .caipuImg{
      width: 0.94rem;
      height: 0.44rem;
      position: absolute;
      left:0.33rem;
      top:0.33rem;
    }

    .item_z_tcaipu .z_tcaipuImg{
      width: 100%;
      height: 4rem;
    }
    .user_z_tcaipu{
      width: 7rem;
      margin-left: 0.31rem;
      margin-top: 0.2rem;
      padding-bottom: 0.2rem;
    }
    .line01_user_z_tcaipu{
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items:  flex-end ;
    }
    .line02_user_z_tcaipu{
       width: 100%;
      display: flex;
      justify-content: space-between;
      align-items:  center ;
      margin-top: 0.2rem;
    }
    .line01_user_z_tcaipu span{
      font-size:0.36rem;
      font-family:PingFangSC;
      color:rgba(2,2,2,1);
    }
    .line01_user_z_tcaipu img{
      width: 0.88rem;
      height: 0.88rem;
      border-radius: 50%;
    }



    .line02_user_z_tcaipu div:nth-child(1){
      display: flex;
      align-items: flex-start;
    }
    .line02_user_z_tcaipu div:nth-child(1) img{
      width:0.36rem;
      height:0.36rem;
       margin-right: 0.1rem;
    }
    .line02_user_z_tcaipu div:nth-child(1) span{
      font-size:0.28rem;
      font-family:PingFangSC;
      color:#020202;
      display: flex;
      align-self:flex-end;
    }

    .line02_user_z_tcaipu div:nth-child(1) .rLine{
      margin: 0rem 0.1rem;
      color:#2C7B8C;
    }

    .line02_user_z_tcaipu div:nth-child(2){
      display: flex;
      align-items: flex-start;
    }
    .line02_user_z_tcaipu div:nth-child(2) img{
      width: 0.29rem;
      height: 0.39rem;
       margin-right: 0.1rem;
    }
    .line02_user_z_tcaipu div:nth-child(2) span{
      font-size:0.28rem;
      font-family:PingFangSC;
      color:#FB775E;
    }

</style>